<template>
	<view class="content">
		<!-- 显示问题的记录区域 -->
		<scroll-view class="question">
			<view class="item" :class="{reverse:item.role!='user'}" v-for="(item,index) in historys">
				<text class="text">{{item.content}}</text>
				<uni-icons :type="item.role=='user'? 'person':'pyq'" size="25"></uni-icons>
			</view>
		</scroll-view>

		<!-- 提问区域 -->
		<view class="word">
			<uni-easyinput class="input" v-model="word" placeholder="" />
			<view class="btn" @tap="doQuestion">提问</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from '../../utils/config'
	const word = ref("")
	// 对话记录数组
	const historys = ref([])
	// 提问的模型
	const model = {
		"model": "moonshot-v1-8k",
		"messages": [],
		"temperature": 0.3
	}
	// 向kimi提问
	async function doQuestion() {
		if (word.value == "") {
			uni.showToast({
				title: "请输入问题！",
				icon: 'none'
			})
		} else {
			historys.value.push({
				"role": "user",
				"content": word.value
			})
			model.messages = historys.value
			console.log(model)
			let res = await uni.$post(CONFIG.kimi_url + "/v1/chat/completions", model)
			console.log(res)
			console.log(res.choices[0].message)
			historys.value.push(res.choices[0].message)
			word.value=""

		}
	}

	// sk-VkiAbaYdYHm5UQcFeilTozQaqwhaypGY7XAafvHj60qwPVU0
</script>

<style lang="scss" scoped>
	.content {
		height: calc(100vh - 97px);
		// border: 1px solid green;
		position: relative;

		.question {
			// border: 1px solid blue;
			height: calc(100vh - 97px - 45px);
			
			.item{
				display: flex;
				
				width: 730rpx;
				margin-top: 5px;
				justify-content: end;
				
				.text{
					border: 1px solid #ccc;
					border-radius: 5px;
					padding: 5px;
					font-size: 14px;			 
				}
			}
			.reverse{
				flex-direction: row-reverse;
			}
		}

		.word {
			position: absolute;
			bottom: 0;
			width: 720rpx;
			height: 85rpx;
			// border: 1px solid red;
			display: flex;
			align-items: center;
			padding: 0 5px;

			.btn {
				height: 35px;
				border: 1px solid #ccc;
				border-radius: 5px;
				width: 100rpx;
				text-align: center;
				line-height: 35px;
				margin-left: 5px;
				cursor: pointer;
			}
		}
	}
</style>